<template>
    <div>
        <div id="zhuzhuangtu" style="width:460px; height:300px; background-color: #fff;">
        </div>
    </div>
</template>

<script>
export default {
    name: 'chart',
    data() {
        return {
            chart: null,
            options: {}
        }
    },
    mounted() {
        this.initOptions()
        this.initzhuzhuangtu()
    },
    methods: {
        initOptions() {
            this.options = {
                    legend: {
                        orient: "horizontal",//水平展示，不写默认水平展示
                        bottom:10,
                        center:20,
                        itemGap: 10,
                       icon: 'square',
                       barWidth:17,
                        data:['本省流量','外省流量','外网流量','总流量']
                    },
            
                // tooltip: {
                //     trigger: 'item'
                // },
                xAxis: {
                    data: ['和平区家宽', '南开区集客', '北辰区家宽', '静海区集客']
                },
                yAxis: {},
                series: [
                    {
                        name:'本省流量',
                        data: [0.29, 0.29, 0.45, 0 ],
                        type: 'bar',
                        stack: 'x',
                        color:'#0076DE',
                        barWidth:17,
                    },
                    {
                        name:'外省流量',
                        data: [54.47,54.47],
                        type: 'bar',
                        stack: 'x',
                        color:'#60BFF3'
                    },
                       {
                        name:'外网流量',
                        data: [33.88, 33.88, 26.47,0],
                        type: 'bar',
                        stack: 'x',
                        color:'#40CB81'
                    },
                       {
                        name:'总流量',
                        data: [50, 4, 3,0],
                        type: 'line',
                        stack: 'x',
                        symbol: 'none',
                        color:'#FCE32B'
                    }
                ]
            };
        },
        initzhuzhuangtu() {
            this.zhuzhuangtu = this.$echarts.init(document.getElementById('zhuzhuangtu'))
            this.zhuzhuangtu.setOption(this.options)
        }
    }
}
</script>